<template>
    <div class="details">
        <div class="banner">
            <banner-detail :banner="goodsDetail.diagram"/>
        </div>
        <div class="info">
            <div class="title" v-text="goodsDetail.name"></div>
            <div class="subtitle" v-text="goodsDetail.dec"></div>
            <div class="current">
                {{goodsDetail.price|moneyFmt(2, '￥')}}
            </div>
            <div class="original">
                <del>
                    原价：{{goodsDetail.money|moneyFmt(2, '￥')}}
                </del>
                <span class="stock">库存{{goodsDetail.stock}}件</span>
                <span class="stock">快递：{{goodsDetail.postage | moneyFmt(2, '￥')}}</span>
                <span class="volume">月销量{{goodsDetail.sales}}件</span>
            </div>
        </div>
        <div class="specification" @click="chooseSpec('',goodsDetail.status)" v-if="goodsDetail.sku">
            <span class="spec">规格</span>
            <span class="cho">{{choice_tip}}</span>
            <span class="icon-right">
                <svg class="icon qb" aria-hidden="true">
                    <use xlink:href="#icon-chevronright"></use>
                </svg>
            </span>
        </div>
        <div class="details_img">
            <img :src="item" v-for="(item, index) in goodsDetail.details" :key="index"/>
        </div>
        <div class="bot-presale">
            <div class="presale-left">
                <div class="bot-price">
                    <del>
                        原价：{{goodsDetail.money|moneyFmt(1, '￥')}}
                    </del>
                    <div class="bot-current">
                        {{goodsDetail.price|moneyFmt(2, '￥')}}
                    </div>
                </div>
            </div>
            <div class="presale" v-if="participate" @click="chooseSpec('buy',goodsDetail.status)">
                参与拼团
            </div>
            <div class="presale" v-else @click="chooseSpec('buy',goodsDetail.status)">
                发起拼团
            </div>
        </div>
        <group-spec
                :proContent="goodsDetail"
                :operation="operation"
                ref="spec"
                v-if="goodsDetail.name"
                @chooseDone="onChooseDone"
                @showSpecMsg="onSpecMsg"
        />
    </div>
</template>

<script>
    import BannerDetail from "../../components/Online/bannerdetail";
    import GroupSpec from "../../components/Online/group-spec";
    import API from '../../request/api';
    import {Toast} from 'vant';
    import {commonMixin} from '@/common/mixin';
    import {mapActions} from 'vuex';

    export default {
        mixins: [commonMixin],
        components: {
            GroupSpec,
            BannerDetail
        },
        name: "group-detail",
        data() {
            return {
                goodsDetail: {},
                isShow: false, // 规格弹窗显示
                selected: {}, // 已选择的属性
                chooseLists: {},
                choice_tip: '',
                cartNum: 0,
                gid: this.$route.query.gid,
                participate: this.$route.query.groupid,
                operation: '', //弹出商品属性选择框的操作
            };
        },
        computed: {
            isLogin() {
                let userInfo = this.$store.state.login.userInfo;
                let login = !!userInfo.role;
                console.log('login:', login, userInfo);
                return login;
            },
            systemId() {
                return this.$store.state.login.system;
            },
        },
        created() {
            // this.showGlobaLoading(); //打开loading
            this.getDetails();
        },
        methods: {
            ...mapActions(['addToCart']),
            //获取商品详情
            getDetails() {
                // 获取商品详情（全文）
                this.request.get(API.onlineGetGoodsContent, {
                    gid: this.gid,
                }).then((res) => {
                    console.log('onlineGetGoodsContent', res);
                    this.goodsDetail = res;
                    // this.hideGlobaLoading(); //关闭loading
                    this.getGoodsContent();
                }).catch((err) => {
                    console.error('getDetails', err);
                });
            },
            getGoodsContent() {
                let stock = 0;
                let price = Number(this.goodsDetail.sku[0].price);
                let deduction = Number(this.goodsDetail.sku[0].deduction);
                this.goodsDetail.sku.filter((item) => {
                    stock = stock + item.stock;
                    // 查找最低价格
                    if (Number(item.price) < price) {
                        price = Number(item.price);
                        deduction = Number(item.deduction);
                    }
                });
                this.goodsDetail.stock = stock;
                this.goodsDetail.price = price;
                this.goodsDetail.deduction = deduction;
            },
            chooseSpec(opera,status) {
                if(status == 3){
                    if(opera) {
                        this.operation = opera;
                    } else{
                        this.operation = 'initiate';
                        if(this.participate) {
                            this.operation = 'participate'
                        }
                    }
                    // 规格弹窗显示
                    this.$refs.spec.show();
                } else {
                    let tips ='本商品暂无库存'; //0,1-无库存,2-未开售,5-已删除
                    if(status == '2'){
                        tips = '本商品暂未开售'
                    }
                    Toast(tips)
                }
            },
            onSpecMsg(msg) {// 规格选择情况
                this.choice_tip = msg;
            },
            //规格选择完毕，加入购物车，需要复制specProduct更改sku属性
            onChooseDone(chooseList, opera) {
                this.chooseLists = chooseList;
                // this.chooseLists.num = buyNum;
                this.chooseLists.sale = this.sale;
                this.chooseLists.gid = this.gid;
                this.goodsDetail.price = chooseList.price;
                this.goodsDetail.deduction = chooseList.deduction;
                this.goodsDetail.stock = chooseList.stock;
                if (opera !== '') {
                    this.operation = opera;
                    this.buy();
                }
            },
            add() {
                // 有没有选择的规格
                if (this.chooseLists.buyid) {
                    if (this.isLogin) {
                        // 购物车添加商品（已注册）
                        this.request.post(API.onlineAddCartGoods, {
                            gid: this.chooseLists.gid,
                            buyid: this.chooseLists.buyid,
                            num: this.chooseLists.count,
                        }).then((res) => {
                            console.log('onlineAddCartGoods', res);
                            this.getCartCount();
                            Toast('加入购物车成功');
                        }).catch((err) => {
                            this.$toast.fail(err);
                        });
                    } else {
                        let sku = this.chooseLists;
                        sku.system = this.$store.state.login.system;
                        this.addToCart(sku);
                        this.getCartCount();
                        Toast('加入购物车成功');
                    }

                } else {
                    // 操作为加入购物车
                    // 规格弹窗显示
                    this.chooseSpec('add');
                }
            },
            buy() {
                // 加是否注册判断
                if (this.isLogin) {
                    if (this.chooseLists.buyid) {
                        let requestArr = [];
                        let requestJson = {};
                        requestJson.buyid = this.chooseLists.buyid;
                        requestJson.gid = this.chooseLists.gid;
                        requestJson.num = this.chooseLists.count;
                        // requestJson.sale = this.chooseLists.sale;
                        requestArr.push(requestJson);
                        let orderData = {
                            data: requestArr,
                            type: 4,
                            groupid: '1',
                        };
                        if(this.$route.query.groupid){
                            orderData.groupid = this.$route.query.groupid
                        }
                        this.$store.commit('dataCreateOrder', orderData);
                        this.$router.push({
                            name: 'order-created'
                        });
                    } else {
                        // 操作为加入购物车
                        // 规格弹窗显示
                        this.chooseSpec('buy');
                    }
                } else {
                    this.$router.push({
                        name: 'login',
                        query: {
                            direct: 'order-created'
                        }
                    })
                }
            },
        }
    };
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl'
    .details {
        margin-left 0
        margin-bottom vw(50)
        overflow-x hidden
    }

    .activity {
        width 100%
        height vw(50)
        background url(backImg) 100% 100% no-repeat
        display flex
        justify-content space-between
        align-items center
        color grayF
        .activity-name {
            padding-left cellPadding
            font-size word14
            line-height vw(19)
        }
        .activity-time {
            padding-right cellPadding
            font-size word12
            line-height vw(16)
            span {
                width vw(10)
                color #FAD11B
                /*border 1px blue solid*/
            }
        }
    }

    .info {
        margin-top smallMargin
        padding-left smallMargin
        padding-top smallMargin
        width 100%
        height vw(115)
        background-color grayF
        .title {
            word-vw(word14, gray3)
            height vw(16)
            line-height vw(16)
        }
        .subtitle {
            word-vw(word12, gray9)
            margin-top titleMargin
            height vw(16)
            line-height vw(16)
            ellipsis()
        }
        .original {
            word-vw(word12, gray9)
            margin-top smallMargin
            height vw(16)
            line-height vw(16)
            display flex
            flex-direction row
            justify-content space-between
            width 100%
            .volume {
                position relative
                margin-right middleMargin
            }
        }
        .current {
            word-vw(word16, main-color)
            margin-top smallMargin
            height vw(21)
            line-height vw(21)
        }
    }

    .specification {
        margin-top smallMargin
        height vw(40)
        width 100%
        background-color grayF
        padding-left smallMargin
        display flex
        align-items center
        .icon-right {
            position absolute
            right smallMargin
            .qb {
                width vw(8)
                height vw(13)
                overflow hidden
                fill gray9
            }
        }
        .spec {
            word-vw(word16, gray3)
        }
        .cho {
            word-vw(word16, gray9)
            margin-left middleMargin
            ellipsis()
            width 80%
        }
    }

    .details_img {
        margin-top smallMargin
        img {
            width 100%
            display flex
            float top
        }
    }

    .bot {
        position fixed
        background-color grayF
        width 100%
        height vw(50)
        display flex
        align-items center
        justify-content space-between
        padding 0 smallMargin
        box-sizing border-box
        font-size word16
        bottom 0
        .bot-price {
            del {
                word-vw(word12, gray9)
                line-height vw(16)
            }
            .bot-current {
                word-vw(word14, gray3)
                line-height vw(19)
            }
        }
        .bot-cart {
            .cart {
                width vw(26)
                height vw(24)
            }
            .cart-num {
                word-vw(word12, grayF)
                display flex
                text-align center
                justify-content center
                align-items center
                background-color main-color
                border-radius all-radius
                width vw(18)
                height vw(18)
                position fixed
                z-index 100
                margin-left vw(12)
                margin-top vw(-5)
            }
        }
        .buy {
            secondary-solid()
            display inline-flex
            justify-content center
            align-items center
        }
        .add {
            //secondary-hollow()
            display inline-flex
            justify-content center
            align-items center
        }
        .no {
            color gray9
            border-color gray9
        }
    }
    .bot-presale{
        position fixed
        background-color grayF
        width 100%
        height vw(50)
        display flex
        align-items center
        justify-content space-between
        padding 0 smallMargin
        box-sizing border-box
        font-size word16
        bottom 0
        .presale-left{
            display flex
            flex-direction row
            justify-content space-between
            align-items center
            width 35%
            .bot-price {
                del {
                    word-vw(word12, gray9)
                    line-height vw(16)
                }
                .bot-current {
                    word-vw(word14, gray3)
                    line-height vw(19)
                }
            }
            .bot-cart {
                .cart {
                    width vw(26)
                    height vw(24)
                }
                .cart-num {
                    word-vw(word12, grayF)
                    display flex
                    text-align center
                    justify-content center
                    align-items center
                    background-color main-color
                    border-radius all-radius
                    width vw(18)
                    height vw(18)
                    position fixed
                    z-index 100
                    margin-left vw(12)
                    margin-top vw(-5)
                }
            }
        }
        .presale{
            secondary-solid()
        }
    }
</style>